<template>
	<view>
		<view class="" id="topBox">
			<search @choose="chooseSearch" :data="scrollData" namekey="mname" page="warehousingFood" @recorder="openRecorderPopup"></search>
			<u-line></u-line>
		</view>
		<template v-if="scrollHeight && scrollData.length>0">
			<materialList :data="scrollData" :menu="scrollMenu" :height="scrollHeight" :scroll_id="scrollViewId" @updata="updataBagList" :loadtime="loadtime" :init_value="scrollInitValue" @scrollViewIdDone="scrollViewIdDone" page="warehousingFood"></materialList>
		</template>
		<view class="fixed-bottom" id="bottomBox">
			<u-line></u-line>
			<view class="flex bgw">
				<view class="bag-btn flex justify-center" @click="openBag">
					<u-badge type="error" :isDot="true" :absolute="true" :offset="[0, 0]"
						v-if="bagList.length > 0"></u-badge>
					<u-icon name="bag-fill" size="20" color="#675f91"></u-icon>
				</view>
				<view class="flex-1" v-if="bagList.length > 0">
					共 <text class="font-bold">{{ bagList.length }}</text>
					种食材
				</view>
				<view class="flex-1 text-red" v-else> 请添加食材 </view>
				<view :class="bagList.length == 0 ? 'disabled' : ''" class="save-btn ml15" @click="save">
					确认
				</view>
			</view>
		</view>
		<u-popup :show="popupShow" @close="popupClose" @open="popupOpen" mode="bottom" :closeable="true">
			<view class="flex justify-center" style="background-color: #f5f5f5; height: 44px">
				<view> 已添加的食材 </view>
			</view>
			<scroll-view scroll-y scroll-with-animation class="popup-scroll">
				<view class="">
					<template v-for="v in bagList">
						<view class="wrapper">
							<view class="blank10"></view>
							<view class="flex">
								<view class="flex-1">
									{{v.name}}
								</view>
								<view style="width: 150upx;">
									{{v.value}}
								</view>
							</view>
							<view class="blank10"></view>
							<u-line color="#e6e6e6"></u-line>
						</view>
					</template>
				</view>
			</scroll-view>
			<view class="wrapper" style="background-color: #f5f5f5">
				<view class="blank20"></view>
				<u-row justify="space-between" gutter="10">
					<u-col span="6">
						<u-button type="info" text="关闭" @click="popupShow = false"></u-button>
					</u-col>
					<u-col span="6">
						<u-button type="primary" :disabled="bagList.length == 0" text="确认" @click="save"></u-button>
					</u-col>
				</u-row>

				<view class="blank20"></view>
			</view>
		</u-popup>
		<recorder-popup :open="recorderPopupOpen" @close="closeRecorderPopup" @add="addRecorderPopup" :data="scrollData" page="warehousingFood"></recorder-popup>
	</view>
</template>

<script>
	import materialList from "@/pagesA/components/material-list/material-list.vue";
	import search from "@/components/search.vue";
	import recorderPopup from "@/pagesA/components/recorder-popup/recorder-popup.vue";
	
	import {
		purchase_request_draft,
		create_new_stock_in,
	} from "@c/api.js";

	export default {
		components: {
			materialList,
			search,
			recorderPopup
		},
		data() {
			return {
				from:'',
				isBack:false,
				scrollViewId: 0,
				scrollHeight:'',
				scrollData:[],
				scrollMenu:[],
				scrollDataObj:{},
				scrollInitValue:[],
				id: 0,
				popupShow: false,
				bagList: [],
				record_list: [],
				loadtime:0,
				recorderPopupOpen:false,
			};
		},
		computed: {},
		methods: {
			openRecorderPopup(){
				console.log('openRecorderPopup');
				this.recorderPopupOpen = true;
			},
			closeRecorderPopup(){
				this.recorderPopupOpen = false;
			},
			addRecorderPopup(data){
				console.log(data);
				let {material_id,unit_id,qty,unit_name,material_name} = data;
				let bagItem = this.bagList.find(v=>v.id == material_id);
				if(bagItem){
					bagItem.value += qty;
				}else{
					let material = this.scrollDataObj[material_id];
					bagItem = {
						id: material_id,
						name: material_name,
						value:qty,
						unit_id: unit_id,
						unit_name: unit_name,
						msupplier_id:material.default_msupplier_id,
					}
					this.bagList.push(bagItem);
				}
				this.scrollInitValue = this.bagList;
				// this.closeRecorderPopup();
				this.chooseSearch(material_id);
			},
			updataBagList(bagList) {
				// console.log(bagList);
				this.bagList = bagList;
			},
			chooseSearch(id){
				this.scrollViewId = id;
			},
			scrollViewIdDone(){
				this.scrollViewId = 0;
			},
			openBag() {
				this.popupShow = true;
			},
			popupClose() {
				this.popupShow = false;
			},
			popupOpen() {},
			save() {
				if (this.bagList.length == 0) {
					uni.$u.toast("请添加食材");
					return;
				}
				
				if(this.isBack){
					let bagList = this.bagList;
					uni.$emit('warehousingFoodBack', bagList);
					// let pages = getCurrentPages();
					// let prevPage = pages[pages.length - 2];
					// prevPage.updataList0FromBagList(bagList);
					uni.$u.route({
						type: 'navigateBack'
					})
				}else{
					let bagList = JSON.stringify(this.bagList);
					this.nav('/warehousingEdit/warehousingEdit?bagList='+bagList)
				}
				//   let record_list = this.set_record_list(); //数据整合结果 根据接口提交需要修改
				// console.log(this.bagList)
				// const params = JSON.stringify(this.bagList);

				// this.nav(
				// 	"/stockOutEdit/stockOutEdit?params=" + encodeURIComponent(params)
				// );

				// uni.$u.toast('保存成功');
				// setTimeout(() => {
				// 	uni.$u.route({
				// 		type: 'navigateBack'
				// 	})
				// }, 2000)
			},
			
			getData_callback(res) {
				let { material_item,unlinked_material_list } = res.result;
				let update_value = {
					updateArr:material_item,
					delIds:unlinked_material_list
				};
				this.$store.commit('update_material_item', update_value);
				let all_material_item = this.$store.getters.get_material_item;
				this.loadtime = new Date().getTime();
				this.scrollData = all_material_item ||[];
				this.scrollDataObj = this.toObj(this.scrollData||[],'id');
				// this.scrollMenu = res.result.material_purchase_category || [];
			},

			getData() {
				uni.showLoading({
					title: "加载中",
				});
				// 待修改
				create_new_stock_in().then((res) => {
						this.getData_callback(res);
					})
					.catch(() => {})
					.finally(() => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					});
			},
		},
		onLoad(d) {
			this.from = d.from ||'';
			this.isBack = !!d.isBack;
			if(d.bagList){
				console.log(d.bagList);
				this.bagList = JSON.parse(d.bagList) || [];
				this.scrollInitValue = this.bagList;
			}
			this.getData();
		},
		onShow() {
			uni.$off('refresh_warehousingFood');
			uni.$once('refresh_warehousingFood',()=>{
				this.getData();
			})
		},
		onReady() {
			uni.createSelectorQuery().select('#topBox').boundingClientRect(data => {
				let topBoxHeght = data.height;
				uni.createSelectorQuery().select('#bottomBox').boundingClientRect(data2 => {
					let bottomBoxHeight = data2.height;
					this.scrollHeight = this.getClineHeight() - topBoxHeght - bottomBoxHeight;
				}).exec()
			}).exec()
		},
		onPullDownRefresh() {
			this.getData();
		},
	};
</script>

<style lang="scss" scoped>
	@import "./warehousingFood.scss";
</style>